<template>
	<div>
		<div class="city-sreach">
			<input class="city-input" placeholder="输入城市名或拼音" v-model="reseachkey" />
		</div>
		<div class="reseach-content">
			<ul v-for="item in reseachlist" :key="item.id">
				<li @click="cityClick(item.name)">{{item.name}}</li>
			</ul>
			<div v-show="isShowCityContent" class="noreseachcontent" >没有搜索到关键字内容</div>
		</div>
	</div>
</template>

<script>
	export default{
		name:"CitySearch",
		props:{
			citylistdata:Array
		},
		data:function(){
			return{
				reseachkey:'',
				reseachlist:[],
				// citylist:[]
				isshow:false,
				timer:null
			}
		},
		computed:{
			isShowCityContent:function(){
				// 当搜索栏内容存在前提下，没有搜索到关键字
				if(this.reseachkey){
					return !this.reseachlist.length
				}
			}
		},
		watch:{
			reseachkey:function(){
				// console.log(this.citylistdata)
				if(this.timer){
					clearTimeout(this.timer)
				}
				// 搜索框为空时
				if(!this.reseachkey){
					this.reseachlist=[]
					// 退出不执行下面的搜索
					return
				}
					
				this.timer=setTimeout(() => {
					const result=[]
					for(let i in this.citylistdata){
						const temp=this.citylistdata[i].cities
						for(let j in temp){
							if(temp[j].pinyin.indexOf(this.reseachkey)>-1 || temp[j].name.indexOf(this.reseachkey)>-1){
								result.push(temp[j])
							}	
						}
					}
					this.reseachlist=result
					// console.log(result)
				},100)
			}
		},
		methods:{
			cityClick:function(city){
				// 在store中能够调用方法changeCity获取到传过去的值
				this.$store.dispatch('changeCity',city)
				// 点击以后跳转到首页
				this.$router.push('/')
			}
		}
	}
</script>

<style scoped="scoped">
	.city-sreach{
		height: 0.9rem;
		background-color: #00BCD4;
		padding: 0 0.2rem;
	}
	.city-input{
		text-align: center;
		box-sizing: border-box;
		border-radius: 0.1rem;
		width: 100%;
		height: 0.75rem;
		color: #666;
	}
	.reseach-content{
		position: relative;
		top: 0;
		left: 0;
		line-height: 0.64rem;
		padding-left: 0.2rem;
	}
	.noreseachcontent{
		text-align: center;
	}
</style>
